<template>
  <div class="userHome">
    <commonHeader title="名医工作室" height="200">
      <div class="search">
        <i-icon type="search" size="20" color="#cccccc" class="icon" />
        <input type="text" class="searchInput" placeholder="请输入搜索内容" v-model="searchValue" />
      </div>
    </commonHeader>
    <hotSearch :hotSearch="conHomePage.hotSearch"></hotSearch>
    <Department :departmentList="conHomePage.department"></Department>
    <recommondDoctors
      :recommondList="conHomePage.recommendDoctors"
      v-if="conHomePage.recommendDoctors && conHomePage.recommendDoctors.length > 0"
    ></recommondDoctors>
    <div v-else>暂无数据</div>
  </div>
</template>

<script>
import { mapGetters, mapActions, mapMutations } from "vuex";
import { get, post } from "../../../utils/request";
import api from "../../../config/api";
import Header from "../../../common/Header";
import hotSearch from "./components/hotSearch";
import department from "./components/department";
import recommondDoctors from "./components/recommendDoctors";
export default {
  computed: {
    ...mapGetters(["test", "conHomePage"])
  },
  watch: {
    searchValue(newVal, olaVal) {
      console.log(this.conHomePage);
      console.log(newVal, "new");
      console.log(olaVal, "old");
    }
  },
  mounted() {
    wx.showTabBar();
    const params = {
      pageNum: 1,
      pageSize: 10
    };
    this.getHomePageData(params);
  },
  data() {
    return {
      searchValue: "",
      hotList: [1, 2, 3, 4, 5]
    };
  },
  methods: {
    ...mapMutations(["SET_TEST"]),
    ...mapActions(["setTest", "getHomePageData"]),
    search() {
      console.log(312312);
    },
    goto() {
      console.log(32132343543654);
    }
  },
  data() {
    return {
      searchValue: ""
    };
  },
  components: {
    commonHeader: Header,
    hotSearch,
    Department: department,
    recommondDoctors
  }
};
</script>

<style lang="scss" scoped>
.userHome {
  top: 200rpx;
  position: absolute;
  width: 100vw;
  height: 100vh;
  overflow: auto;
  .search {
    float: left;
    width: 100%;
    z-index: 100;
    bottom: 0;
    position: relative;
    margin-top: 30rpx;
    .icon {
      position: absolute;
      margin-left: 10rpx;
      color: #cccccc;
      top: 8rpx;
    }
    .searchInput {
      width: 100%;
      height: 60rpx;
      line-height: 60rpx;
      border: none;
      border-radius: 50rpx;
      background-color: #ffffff;
      color: #cccccc;
      font-size: 24rpx;
      box-sizing: border-box;
      padding: 0 50rpx;
    }
  }
}
</style>
<style lang="css">
.doctorAvatar {
  width: 120rpx !important;
  height: 120rpx !important;
  border-radius: 50% !important;
}
.departmentAvatar {
  width: 40rpx !important;
  height: 40rpx !important;
  margin-top: -5rpx !important;
  margin-left: 5rpx !important;
  border-radius: 50% !important;
}
.departmentIcon {
  display: block !important;
  position: absolute;
  font-size: 48rpx !important;
  top: 50% !important;
  margin-top: -24rpx;
  right: 0;
  color: #6e6e6e !important;
}
</style>
